<template>
    <el-dialog v-model="show" title="添加活动" @close="emit('hide')" :close-on-click-modal="false">
        <el-form ref="formRef" :model="data">
            <!-- :rules="rules" -->
            <el-form-item label="活动名称" label-width="100px" prop="title">
                <el-input v-model="data.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="开始时间" label-width="100px" prop="start">
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker v-model="data.startDate" type="date" />
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="结束时间" label-width="100px" prop="end">
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker v-model="data.endDate" type="date" />
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="上线下线" label-width="100px">
                <el-radio-group v-model="data.status" class="ml-4">
                    <el-radio :label="1" size="large">上线</el-radio>
                    <el-radio :label="0" size="large">下线</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="hideFn"> 取消 </el-button>
                <el-button type="primary" @click="sureFn"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { user } from '@/api';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { watch } from 'vue';
import { reactive, ref, toRefs } from 'vue';

const data = reactive<ISkillModel>({
    createTime: '',
    endDate: '',
    id: 0,
    startDate: '',
    status: 0,
    title: ''
})
const props = defineProps({
    show: {
        type: Boolean,
        default: true
    },
    ID: {
        type: Number,
        default: 0
    },
})
const emit = defineEmits(['hide', 'none', 'referh'])


const formRef = ref<FormInstance>()
const sureFn = () => {
    ElMessageBox.confirm("是否确认修改", "提示", {
        type: "warning",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
    }).then(() => {
        if (props.ID !== 0) {
            user.flashupdateApi(data).then(res => {
                if (res.code === 200) {
                    ElMessage({
                        type: res.code === 200 ? "success" : "error",
                        message: res.message
                    })
                    //关闭表格
                    emit('hide')
                    //刷新表格
                    emit('referh')
                }
            })
        } else {
            user.addFlashupdateApi(data).then(res => {
                if (res.data === 200) {
                    ElMessage({
                        type: 'success',
                        message: '添加成功'
                    })
                }
            })
            //关闭表格
            emit('hide')
            //刷新表格
            emit('referh')
        }
    }).catch(() => {

    })

}

//点击取消
const hideFn = () => {
    emit('hide')
    data.createTime = '',
        data.endDate = '',
        data.id = 0,
        data.startDate = '',
        data.status = 0,
        data.title = ''
}


watch(() => props.ID,
    () => {
        if (props.ID === 0) {
            data.createTime = ''
            data.endDate = ''
            data.startDate = ''
            data.title = ''
            data.id = 0
            data.status = 0
        }
        user.selectInfoApi(props.ID).then(res => {
            if (res.code === 200) {
                Object.assign(data, res.data)
            }
        })
    })
</script>

<style lang="less" scoped>
.el-input {
    width: 200px;
}
</style>